<template>
  <div class="box">
    <Row class="Row_content">
      <Form ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="85">
        <FormItem label="用户名："
                  prop="name">
          <Input v-model="formValidate.name"
                 class="Row_content_input"
                 disabled></Input>
        </FormItem>
        <FormItem label="手机号："
                  prop="phone">
          <Input v-model="formValidate.phone"
                 class="Row_content_input"
                 disabled></Input>
        </FormItem>
        <FormItem label="Email："
                  prop="email">
          <Input v-model="formValidate.email"
                 class="Row_content_input"
                 disabled></Input>
        </FormItem>
        <FormItem label="旧密码："
                  prop="oldpassword">
          <Input v-model="formValidate.oldpassword"
                 placeholder="请输入"
                 @on-keyup="filterSpace1"
                 :maxlength="16"
                 class="Row_content_input"
                 type="password"></Input>
        </FormItem>
        <FormItem label="新密码："
                  prop="newpassword">
          <Input v-model="formValidate.newpassword"
                 placeholder="请输入"
                 :maxlength="16"
                 @on-keyup="filterSpace2"
                 class="Row_content_input"
                 type="password"></Input>
        </FormItem>
        <FormItem label="确认密码："
                  prop="confirmpassword">
          <Input v-model="formValidate.confirmpassword"
                 placeholder="请输入"
                 :maxlength="16"
                 @on-keyup="filterSpace3"
                 class="Row_content_input"
                 type="password"></Input>
        </FormItem>
        <FormItem class="form-btn">
          <Button type="primary"
                  @click="handleSubmit('formValidate')"
                  style="width:100px;height:32px;">确定</Button>
          <Button @click="cancel"
                  style="width:100px;height:32px;margin-left:24px">取消</Button>
        </FormItem>
      </Form>
    </Row>
  </div>
</template>
<script>
import { routeEqual } from '@/libs/util'
import { getUserInfos, setPasswordUpdate } from '@/api/system/employee.js'
import { hex_md5 } from '@/libs/md5'
export default {
  name: 'employee_modify_password',
  data () {
    return {
      id: '',
      formValidate: {
        name: '',
        phone: '',
        email: '',
        oldpassword: '',
        newpassword: '',
        confirmpassword: ''
      },
      ruleValidate: {
        oldpassword: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('旧密码不能为空'))
              } else if (value.length < 8) {
                callback(new Error('密码长度在8-16位之间'))
              } else {
                callback()
              }
            }
          }
        ],
        newpassword: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('新密码不能为空'))
              } else if (value.length < 8) {
                callback(new Error('密码长度在8-16位之间'))
              } else if (value === this.formValidate.oldpassword) {
                callback(new Error('新密码不能与旧密码相同'))
              } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/.test(value)) {
                callback(new Error('密码必须要有字母大小写加数字,支持特殊字符'))
              } else {
                callback()
              }
            }
          }
        ],
        confirmpassword: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('确认密码不能为空'))
              } else if (value.length < 8) {
                callback(new Error('密码长度在8-16位之间'))
              } else if (value !== this.formValidate.newpassword) {
                callback(new Error('确认密码与新密码不相同'))
              } else {
                callback()
              }
            }
          }
        ]
      }
    }
  },
  computed: {},
  created () { },
  mounted () {
    this.router()
  },
  methods: {
    filterSpace1 () {
      this.formValidate.oldpassword = this.formValidate.oldpassword.replace(/\s+/g, '')
      this.formValidate.oldpassword = this.formValidate.oldpassword.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, '')
    },
    filterSpace2 () {
      this.formValidate.newpassword = this.formValidate.newpassword.replace(/\s+/g, '')
      this.formValidate.newpassword = this.formValidate.newpassword.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, '')
    },
    filterSpace3 () {
      this.formValidate.confirmpassword = this.formValidate.confirmpassword.replace(/\s+/g, '')
      this.formValidate.confirmpassword = this.formValidate.confirmpassword.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, '')
    },
    router () {
      this.id = this.$route.params.id // 获取的是编辑还有详情带过来的用户id
      getUserInfos({// 详情和编辑过来调用查找数据
        'id': this.id,
        'orgId': this.$route.query.orgId
      }).then((res) => {
        if (res.data.status === 200) {
          this.formValidate.name = res.data.data ? res.data.data.username : ''
          this.formValidate.phone = res.data.data ? res.data.data.phoneNumber : ''
          this.formValidate.email = res.data.data ? res.data.data.email : ''
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    handleSubmit (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.formValidate.confirmpassword === this.formValidate.newpassword) {
            setPasswordUpdate({
              'merchantId': this.$store.state.user.merchantId,
              'id': this.id,
              'oldPassword': hex_md5(this.formValidate.oldpassword), // 初始默认为123456
              'password': hex_md5(this.formValidate.confirmpassword),
              'orgId': this.$route.query.orgId
            }).then((res) => {
              if (res.data.status === 200) {
                this.$Message.success('重置成功！')
                this.$store.commit('closeTag', this.$route)
                this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            })
          } else {
            this.$Message.error('两次输入的密码不一致')
          }
        }
      })
    },
    cancel () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
    }
  }
}
</script>
<style lang="less">
.box {
  padding-bottom: 4%;
  .Row_content {
    width: 365px;
    margin: 100px auto;
    .ivu-form-item {
      margin-bottom: 20px;
    }
    .ivu-form-item-error-tip {
      padding-top: 5px;
    }
    .form-btn {
      margin-top: 32px;
    }
    .textarea_des {
      position: relative;
    }
    .textarea_des:after {
      position: absolute;
      content: "0/300";
      display: block;
      right: 17px;
      bottom: 12px;
    }
  }
}
</style>
